<template>
  <van-tabbar
    route
    fixed
    placeholder
    safe-area-inset-bottom
    :border="border"
    class="tabbar"
  >
    <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item to="/chance" icon="search">机会</van-tabbar-item>
    <van-tabbar-item to="/talk" icon="friends-o">有话说</van-tabbar-item>
    <van-tabbar-item to="/mine" icon="setting-o">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import Vue from 'vue'
import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)

export default {
  props: {
    border: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less" scoped>
.tabbar {
  /deep/ .van-tabbar {
    padding: 13.5px 0;
  }

  /deep/ .van-tabbar-item__icon {
    font-size: 24px;
  }
}
</style>